<template>
	<div class="face-wrap">
		<div class="face-inner-wrap">
			<div class="face-header">
				<ul class="face-ul"><li class="face-li"><a href="javascript:;" class="face-a">默认</a></li></ul>
			</div>
			<div class="face-image-wrap">
				<ul class="face-image-ul">
					<li class="face-image-li" v-for="(item,index) in faceArr" :key="index">
						<a href="javascript:;" class="face-image-a" :title="item" @click.stop="emojiClick(index,$event)">
							<img :src="imgArr[index]" :alt="item" class="face-img"/>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		name:"face",
		data(){
			return{
				imgArr:[]
			}
		},
		props:{
			faceArr:{
				type:Array
			},
			emojiContent:{
				type:String,
				default:''
			}
		},
		methods:{
			emojiClick(index){
				this.$emit('update:emojiContent',this.faceArr[index]);
				this.$emit('show-face',false);
				$(".content-textarea").focus();
			},
			getImgArr(){
				let arr = this.faceArr.map((item,index)=>{
					return  require('../../assets/face/'+index+'.png');
				});
				return arr;
			}
		},
		created(){
			this.imgArr = this.getImgArr();
		},
		mounted(){
			let that = this;
			$(document).off("click",function(){
				that.$emit('show-face',false);
			}).on("click",function(){
				that.$emit('show-face',false);
			});
		}
	}
</script>

<style scoped>
	.face-wrap{width: 346px;background-color: #fff;box-shadow: 0 0 20px rgba(0,0,0,.2)}
	.face-inner-wrap{border: 1px solid #dadada;}
	.face-header{border-bottom: 1px solid #dadada;;}
	.face-a{display: inline-block;padding:0 15px;line-height: 35px;vertical-align: top;text-align: center;color: #5baae3;}
	.face-image-wrap{width: 308px;margin:8px auto;border-top:1px solid #dadada ;border-left: 1px solid #dadada ;}
	.face-image-li{display: inline-block;width:27px ;height: 27px;margin: -1px 0 0 -1px;vertical-align: top;border:1px solid #dadada ;}
	.face-image-a{display: block;}
	.face-img{width: 100%;height: 100%;vertical-align: top;}
	.face-wrap .face-image-li:hover{position: relative;z-index: 2;border: 1px solid #eb7350;background: #fff9ec;}
</style>